網站前端

新手入門

如果完全沒碰過任何前端的開發，可以從以下三個項目開始著手

• HTML
• Javascript
• CSS

建議可以run過 w3school 的tutorial, 了解這三項前端基礎之後再繼續往後看前端框架(framework)比較不會一頭霧水

學習目標

• Javascript: 基本語法，closure
• CSS: 基本語法，box model

前端框架

均一平台使用以下幾個UI framework/library, 它們分別是Javascript/HTML/CSS的好幫手，能做到的事其實都能用Javascript/HTML/CSS硬幹出來，但使用了之後就可以用更聰明更智慧更簡單的方式來撰寫Javascript/HTML/CSS

• jQuery
• Handlebars
• LESS

jQuery

jQuery是一套Javascript函式庫, 提供了操作HTML attribute, event, style等等更簡便的操作方式, 教學可參考 w3school tutorial

建議至少學會以下概念

• select $()
• on + click
• ajax

Handlebars

Handlebars是一套前端template framework, 讓你透過template, 在HTML語法中使用變數和簡單的邏輯語法將資料填入template內, 入門建議可以閱讀 官網 的教學

建議學會以下概念

學習目標

• Built-in helpers

[ 實作練習題 ]

Project：Guestbook的留言不可以有 “均一好棒棒” 這一個關鍵字

網址：GAE Guestbook Tutorial

1. 前端送出API前檢查，如果有關鍵字就跳警告並擋住不發出API
2. 後端寫入資料庫前檢查，如果有關鍵字就不寫入資料庫
3. deploy到自己的帳號下的GAE，讓其他人可以連進去使用

其他延伸學習（可先跳過）

• Bootstrap 3
• SweetAlert 2
• Font Awesome

• LESS

  LESS是一套CSS框架，讓CSS撰寫更人性化，可以使用例如變數, 運算, 巢狀結構, 函式等等功能，寫好的.less檔案透過compile工具可以再轉換成對應的.css檔案讓browser讀取

  LESS.js介紹 (中文, 短)

  Get Into LESS: the Programmable Stylesheet Language (英文, 長)

  學習目標

  • variable, 運算
  • nested rule
  • mixin